<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .green {
            color: aquamarine;
        }

        .blue {
            color: blue;
        }

        .xxk {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- 1 -->
    <div id="app">
        <div class="box" @mouseover="show=!show" @mouseout="show=!show" v-show="show">
        </div>
    </div>
    <!-- 2 -->
    <div id="a">
        <div v-show="res">
            <input type="text">账号
            <input type="text">密码
        </div>
        <button @click="res=true">登录</button>
        <button @click="res=false">X</button>
    </div>
    <!-- 3 -->
    <div id="b">
        <div @click="res1=0" :class="{'green':res1===0}">微信支付</div>
        <div @click="res1=1" :class="{'green':res1===1}">支付宝支付</div>
        <div @click="res1=2" :class="{'green':res1===2}">银联支付</div>
    </div>
    <!-- 4 -->
    <div id="x">
        <button @click="res2=0">选项1</button>
        <button @click="res2=1" :class="{'green':res2===1}">选项2</button>
        <button @click="res2=2" :class="{'green':res2===2}">选项3</button>
        <button @click="res2=3" :class="{'green':res2===3}">选项4</button>
        <div class="xxk" v-if="res2===0">1</div>
        <div class="xxk" v-if="res2===1">2</div>
        <div class="xxk" v-if="res2===2">3</div>
        <div class="xxk" v-if="res2===3">4</div>
    </div>
    <!-- 5 -->
    <div id="down" @click="lowd=!lowd">{{on}}
        <div @click="lowd=!lowd">
            <div v-for="(item,index) in arr" v-show="lowd" @click="on=item">
{{item}}
            </div>
        </div>
    </div>
    <!-- 6 -->
    <div id="app1">
        <div>输入姓名<input type="text" v-model="val" ></div>
        <button @click="btn">提交</button>
        <li v-for="(item,index) in list">{{item.val}}</li>
        <button @click="log">删除</button>
            </div>
    <!-- 7 -->
    <div id="yc">
    <input :type="aaa?'password':'text'" >
    <button @click="aaa=!aaa">隐藏</button>
</div>
    <!-- 8 -->
    <div id="zz">
    <textarea type="text" maxlength="200" v-model="qw"></textarea>
            <span>{{200-qw.length}}/200</span>

            <button @click="inputType=inputType==='password'?'text':'password'"></button>
            <input :type="inputType">
        </div>
</body>
<script src="./vue.js"></script>
<script>
    //1
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            let show = ref(true)
            return {
                show
            }
        }
    }).mount('#app')

    // createApp({
    //     setup() {
    //         let show = ref(false)
    //         return {
    //             show
    //         }
    //     }
    // }).mount('#app')



    //2
    createApp({
        setup() {
            let res = ref(true)
            return {
                res
            }
        }
    }).mount('#a')
    //3
    createApp({
        setup() {
            let res1 = ref(2)
            let green = ref('green')
            return {
                res1,
                green
            }
        }
    }).mount('#b')
    //4
    createApp({
        setup() {
            let res2 = ref(3)
            let blue = ref('blue')
            return {
                res2,
                blue
            }
        }
    }).mount('#x')
    //5
    createApp({
        setup() {
            let arr=ref(['选项1','选项2','选项3'])
            let lowd=ref(false)
            let on=ref('选项卡')
            return {
               arr,
               lowd,
               on
            }
        }
    }).mount('#down')
    //6
    createApp({
        setup(){
            let list=ref([])
            let val=ref('')
            function btn(){
            list.value.push({
                val:val.value,
            })
            val.value=''
            }
            function log(){
                list.value.splice(0,1)
            }
            return{
                list,
                val,
                btn,
                log
            }
        }
    }).mount('#app1')
    //7
    createApp({
        setup() {
            let aaa=ref(false)
            return {
                aaa
            }
        }
    }).mount('#yc')
    //8
    createApp({
        setup() {
            let qw=ref('')
            const inputType = ref('password') 
            return {
            qw,
            inputType
            }
        }
    }).mount('#zz')
</script>

</html>